<template>
  <div>
    <el-empty v-if="!list.length" />
    <div class="list" v-else>
      <div class="item" v-for="(item, index) in list" :key="index" @click="onItem(item)" @dblclick="openFolder(item)" @contextmenu.prevent="showFileMenu($event, item)">
        <div class="icon-box">
          <svg-icon icon-class="folder" style="font-size: 50px" v-if="item.isFolder" />
          <el-image class="img g-img-placeholder" :src="item.url" fit="cover" v-else-if="item.isImage" />
          <svg-icon icon-class="video" style="font-size: 50px" v-else-if="item.isVideo" />
          <i class="el-icon-document" v-else />
        </div>
        <div class="folder-name ellipsis2" :title="item.fileName">{{ item.fileName }}</div>
      </div>
    </div>

    <el-image ref="previewRef" class="hide" :src="previewSrc" :preview-src-list="previewSrcList" />
    <VideoPlayer ref="videoPlayer" />
    <FileInfo ref="fileInfo" />
  </div>
</template>
<script>
// 文件夹列表。展示文件夹、图片、视频，及预览和播放
import VideoPlayer from '@/views/statement/components/DialogVideoPlayer'
import FileInfo from './FileInfo'
export default {
  components: { VideoPlayer, FileInfo },
  props: { list: { type: Array, default: () => [] } },
  data() {
    return {
      previewSrcList: [],
      previewSrc: ''
    }
  },
  methods: {
    openFolder(item) {
      if (!item.isFolder) return
      this.$emit('openFolder', item)
    },
    onItem(item) {
      if (item.isFolder) return

      // 预览大图
      if (item.isImage) {
        this.previewSrcList = this.list.filter(i => i.isImage).map(i => i.url)
        this.previewSrc = item.url
        this.$nextTick(() => this.$refs.previewRef?.clickHandler())
        return
      }
      // 播放视频
      if (item.isVideo) {
        return this.$refs.videoPlayer.play(item.url)
      }
    },
    showFileMenu(event, item) {
      if (item.isFolder) return

      const items = [
        { label: '详情', icon: 'el-icon-tickets', onClick: () => this.openInfo(item) },
        { label: '下载', icon: 'el-icon-download', onClick: () => this.onDownload(item) }
      ]
      if (item.isImage) items.unshift({ label: '预览', icon: 'el-icon-zoom-in', onClick: () => this.onItem(item) })
      else if (item.isVideo) items.unshift({ label: '预览', icon: 'el-icon-video-play', onClick: () => this.onItem(item) })

      this.$contextmenu({ event, zIndex: 1e8, minWidth: 100, items })
    },
    openInfo(item) {
      this.$refs.fileInfo.open(item)
    },
    onDownload(item) {
      const elink = document.createElement('a')
      elink.download = item.fileName
      elink.style.display = 'none'
      elink.href = item.url
      elink.click()
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    margin: 0 10px 10px 0;
    padding-top: 8px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    &:hover {
      background-color: #f5f7fa;
      .icon-box {
        transform: scale(1.1);
      }
    }
  }
  .icon-box {
    width: 50px;
    height: 50px;
    margin: auto;
    transition: 0.24s;
    color: #5e6d82;
  }
  .img {
    width: 100%;
    height: 100%;
  }
  i[class^='el-icon-'] {
    font-size: 50px;
  }
  .folder-name {
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
    user-select: none;
  }
}
</style>
